<template>
  <div class="hospital-detail-page">
    <!-- 顶部导航 -->
    <page-header :title="hospital.name">
      <template #right>
        <van-icon 
          :name="isCollected ? 'star' : 'star-o'" 
          :color="isCollected ? '#FFC82C' : ''" 
          size="20" 
          @click="toggleCollect"
        />
      </template>
    </page-header>

    <div class="page-content">
      <!-- 医院基本信息 -->
      <hospital-info :hospital="hospital" />
      
      <!-- 科室导航 -->
      <department-nav />
      
      <!-- 专家推荐 -->
      <doctor-recommend :hospital-id="hospitalId" />
      
      <!-- 医院介绍 -->
      <hospital-intro :hospital="hospital" />
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-bar">
      <div class="feedback-btn" @click="onFeedback">
        <van-icon name="comment-o" />
        <span>咨询</span>
      </div>
      <van-button type="primary" block @click="onBooking">立即预约</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import PageHeader from '@/components/common/PageHeader.vue'
import HospitalInfo from '@/components/hospital/HospitalInfo.vue'
import DepartmentNav from '@/components/hospital/DepartmentNav.vue'
import DoctorRecommend from '@/components/hospital/DoctorRecommend.vue'
import HospitalIntro from '@/components/hospital/HospitalIntro.vue'

const route = useRoute()
const router = useRouter()
const hospitalId = Number(route.params.id)
const isCollected = ref(false)

// 模拟医院数据
const hospital = ref({
  id: hospitalId,
  name: '协和医院',
  image: '/images/hospital1.jpg',
  level: '三甲',
  type: '综合医院',
  address: '北京市东城区帅府园1号',
  phone: '010-12345678',
  intro: '协和医院始建于1921年，是一所集医疗、教学、科研为一体的现代化综合性三级甲等医院，也是国家重点科技攻关医院。协和医院拥有一支高水平的医疗队伍，医疗设备先进，服务质量优良，以良好的社会信誉和显著的医疗特色享誉海内外。'
})

// 收藏/取消收藏
const toggleCollect = () => {
  isCollected.value = !isCollected.value
  showToast(isCollected.value ? '已收藏' : '已取消收藏')
}

// 预约
const onBooking = () => {
  router.push(`/hospital/${hospitalId}/booking`)
}

// 咨询
const onFeedback = () => {
  showToast('咨询功能开发中')
}

onMounted(() => {
  // 在实际应用中，这里应该根据 hospitalId 从API获取医院详情
  console.log('加载医院ID:', hospitalId)
})
</script>

<style scoped lang="scss">
.hospital-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 46px; // 为顶部导航栏预留空间
  padding-bottom: 60px; // 为底部按钮预留空间
  
  .page-content {
    padding-bottom: 16px;
  }
  
  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    
    .feedback-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 16px;
      margin-right: 16px;
      
      .van-icon {
        font-size: 20px;
        color: #666;
      }
      
      span {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
      }
    }
    
    .van-button {
      flex: 1;
      height: 40px;
      border-radius: 20px;
    }
  }
}
</style> 